<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>Data Copilot</title>
    <!-- Theme CSS -->
    <link type="text/css" href="./assets/css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link type="text/css" href="./assets/css/demo.css" rel="stylesheet">
  </head>

  <body>

  <nav class="navbar navbar-expand-lg navbar-transparent navbar-dark bg-dark py-4">
    <div class="container">
      <a class="navbar-brand" href="">Data Copilot</a>
      <button class="navbar-toggler" type="button" data-action="offcanvas-open" data-target="#navbar_main" aria-controls="navbar_main" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-collapse offcanvas-collapse" id="navbar_main">
        <ul class="navbar-nav ml-auto align-items-lg-center">
          <li class="nav-item ">
            <a class="nav-link" href="../index.html">Overview</a>
          </li>
          <!-- <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbar_main_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
            <div class="dropdown-menu" aria-labelledby="navbar_1_dropdown_1">
              <a class="dropdown-item" href="../pages/homepage.html">Homepage</a>
              <a class="dropdown-item" href="../pages/about.html">About us</a>
              <a class="dropdown-item" href="../pages/sign-in.html">Sign in</a>
              <a class="dropdown-item" href="../pages/contact.html">Contact</a>
            </div>
          </li> -->
          <li class="nav-item">
            <a href="https://github.com/AICareOne/data-copilot-functions-land" target="_blank" class="btn btn-sm bg-white d-none d-lg-inline-flex" >github repo</a>
          </li>
          <li class="nav-item">
            <a href="#try" target="_blank" class="btn btn-sm bg-white d-none d-lg-inline-flex" >Demo</a>
          </li>
          <div class="dropdown-divider d-lg-none my-4"></div>
          <li class="nav-item">
            <a class="nav-link nav-link-icon" href="https://github.com/AICareOne/data-copilot-functions-land" target="_blank"><i class="fab fa-github"></i><span class="ml-2 d-lg-none">Github</span></a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

    <main class="main">

<!--背景图片-->
      <section class="spotlight parallax bg-cover bg-size--cover" data-spotlight="fullscreen" style="background-image: url('./pic/back.png')">
        <span class="mask bg-primary alpha-6"></span>
        <div class="spotlight-holder py-lg pt-lg-xl">
          <div class="container d-flex align-items-center no-padding">
            <div class="col">
              <div class="row cols-xs-space align-items-center text-center text-md-left justify-content-center">
                <div class="col-7">
                  <div class="text-center mt-5">
                    <!--标题-->
                    <h2 class="heading display-4 font-weight-400 text-white mt-5 animated" data-animation-in="fadeInUp" data-animation-delay="2000">
                      Data Copilot
                    </h2>
                    <!--副标题-->
                    <!-- <p class="lead text-white mt-3 lh-180 c-white animated" data-animation-in="fadeInUp" data-animation-delay="2500">
                      <strong class="text-white">2023</strong>
                    </p> -->

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="py-5 bg-lighter border-top border-bottom" id="scrollToSection">
        <div class="container">
          <div class="d-flex align-items-center justify-content-center">
            <!-- <a href="#" class="btn btn-danger btn-icon-only btn-zoom--hover rounded-circle">
              <span class="btn-inner--icon"><i class="fas fa-heart"></i></span>
            </a> -->
            <span class="heading h4 ml-3 mb-0">AI-Powered Insights for a Smarter Singapore</span>
          </div>
        </div>
      </section>
      <section class="slice slice-lg" data-delimiter="1">
        <div class="container">
          <div class="row cols-xs-space cols-sm-space align-items-center">
            <div class="col-md-6">
              <img src="./pic/pt1.png" class="img-center img-fluid rounded z-depth-3">
            </div>
            <div class="col-md-6 col-lg-5 ml-lg-auto">
              <div class="pr-md-4">
                <h3 class="heading h3">
                  <i class="fas fa-university"></i> Addressing Complex Scenario Requirements
                </h3>
                <p class="lead text-gray mt-4">In high-complexity scenarios such as industrial and urban computing, existing general frameworks (e.g., Langchain, RAG, Text2SQL) struggle to meet the demands for accuracy, flexibility, and practicality. This project aims to propose a systematic method that combines LLM capabilities with professional domain knowledge to break through the limitations of current technologies in data integration, semantic understanding, and logical reasoning, achieving reliable application implementation.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="slice slice-xl" data-delimiter="1">
        <div class="container">
          <div class="row cols-xs-space cols-sm-space align-items-center">
            <div class="col-md-6 order-md-2 ml-lg-auto">
              <img src="./pic/pt2.png" class="img-center img-fluid rounded z-depth-3">
            </div>
            <div class="col-md-6 col-lg-5 order-md-1">
              <div class="pr-md-4">
                <h3 class="heading h3">
                  Improving Data Query and Decision-Making Capabilities <i class="fas fa-stethoscope"></i>
                </h3>
                <p class="lead text-gray mt-4">
                  In complex scenarios with multi-database redundancy, inconsistent field semantics, and varying field purposes depending on context, this project establishes a field meaning mapping table and unifies the structure and connection logic between databases. This ensures that the system can accurately generate data query logic even when facing semantic ambiguity, structural redundancy, and opaque rules.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>


      <section class="slice-lg">
        <div class="container">
          <h2 class="heading h3 strong-600 text-center mb-5">
            Innovation
          </h2>
          <div class="row-wrapper">

            <div class="row cols-xs-space cols-sm-space cols-md-space">
              <div class="col-md-6">
                <div class="card bg-primary">
                  <div class="card-body py-5">
                    <div class="d-flex align-items-start">
                      <div class="icon icon-lg">
                        <i class="fab fa-github text-white"></i>
                      </div>
                      <div class="icon-text">
                        <h3 class="heading text-white h4">Agentic Flow Guided Problem Parsing and Interactive Clarification</h3>
                        <p class="text-white mb-0">Through multi-round interactions to eliminate ambiguity and generate pseudocode, it verifies whether the data can satisfy the intent. This method effectively combines natural language with structured data to understand user query intentions in complex backgrounds.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="card">
                  <div class="card-body py-5">
                    <div class="d-flex align-items-start">
                      <div class="icon icon-lg">
                        <i class="fas fa-check"></i>
                      </div>
                      <div class="icon-text">
                        <h3 class="heading h4">Database Structure Analysis and Field Semantic Alignment <small></small></h3>
                        <p class="mb-0">Establishing a field meaning mapping table and unifying the structure and connection logic between databases, this project ensures that the system can accurately generate data query logic even when facing semantic ambiguity, structural redundancy, and opaque rules.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <section class="slice slice-lg" data-delimiter="1">
              <div class="container">
                <div class="row cols-xs-space cols-sm-space align-items-center">
                  <div class="col-md-6">
                    <img src="./pic/d.png" class="img-center img-fluid rounded z-depth-3">
                  </div>
                  <div class="col-md-6 col-lg-5 ml-lg-auto">
                    <div class="pr-md-4">
                      <h3 class="heading h3">
                        API and Function Specification Definition, Refined Code Generation
                      </h3>
                      <p class="lead text-gray mt-4">Solidifying professional knowledge into rule function code ensures precision and controllability. The LLM is mainly used for selecting intuitive and well-defined functions and flexibly matching parameters according to the problem.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            
            <div class="row cols-xs-space cols-sm-space cols-md-space">
              <div class="col-md-6">
                <div class="card bg-primary">
                  <div class="card-body py-5">
                    <div class="d-flex align-items-start">
                      <div class="icon icon-lg">
                        <i class="fas fa-paperclip text-white"></i>
                      </div>
                      <div class="icon-text">
                        <h3 class="heading text-white h4">Case and Code Template-Driven Based on Typical Scenarios</small></h3>
                        <p class="text-white mb-0">Establishing a case library and mapping templates provides reference logic and implementation for cross-database queries and analysis.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="card">
                  <div class="card-body py-5">
                    <div class="d-flex align-items-start">
                      <div class="icon icon-lg">
                        <i class="fas fa-font"></i>
                      </div>
                      <div class="icon-text">
                        <h3 class="heading h4">...</h3>
                        <p class="mb-0">......</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>



      <section id="try" class="slice slice-lg bg-tertiary bg-cover bg-size--contain" style="background-image: url('./pic/back2.png'); background-position: center 10%;">
        <span class="mask bg-primary alpha-7"></span>
        <div class="container text-center">
          <div class="row cols-xs-space cols-sm-space cols-md-space">
            <div class="col-12">
              <h2 class="heading text-white h1 strong-600">
              </h2>
              <div class="row justify-content-center mt-4">
                <div class="col-lg-8">
                  <p class="lead text-white">
                  </p>
                  <p class="lead text-white">
                  </p>
                  <p class="lead text-white">
                  </p>
                  <p class="lead text-white">
                  </p>

                  <div class="btn-container mt-5">
                    <a href="" class="btn btn-lg bg-white px-4">
                    Demo
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>


    </main>
    <footer class="pt-5 pb-3 footer  footer-dark bg-tertiary">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-4">
            <div class="pr-lg-5">
              <h1 class="heading h6 text-uppercase font-weight-700 mb-3">Data Copilot</h1>
              <p></p>
              <p></p>
            </div>
          </div>

          <div class="col-6 col-md">
            <h5 class="heading h6 text-uppercase font-weight-700 mb-3">ref</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="https://github.com/bytesc/">github</a></li>
              <li><a class="text-muted" href="https://github.com"></a></li>
              <li><a class="text-muted" href="https://www.onemap.gov.sg/">data</a></li>
            </ul>
          </div>
        </div>
        <hr>

      </div>
    </footer>
    <!-- Core -->
    <script src="./assets/vendor/jquery/jquery.min.js"></script>
    <script src="./assets/vendor/popper/popper.min.js"></script>
    <script src="./assets/js/bootstrap/bootstrap.min.js"></script>
    <!-- FontAwesome 5 -->
    <script src="./assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
    <!-- Page plugins -->
    <script src="./assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="./assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
    <script src="./assets/vendor/input-mask/input-mask.min.js"></script>
    <script src="./assets/vendor/nouislider/js/nouislider.min.js"></script>
    <script src="./assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
    <!-- Theme JS -->
    <script src="./assets/js/theme.js"></script>
  </body>
</html>
